<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学科管理</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/vue.js"></script>
  <script src="js/index.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/token.js"></script>
  <style>
    .el-header{
      background-color: #545c64;
    }
    .header-img{
      width: 100px;
      margin-top:20px;
    }
  </style>
</head>
<body>
<div id="div">
  <template>
    <div class="dept-box">
      <el-row>
        <el-col :span="24">
          <div class="tool-box">
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="openFormToAdd">新增</el-button>
          </div>
        </el-col>
      </el-row>

      <!--展示数据表格-->
      <el-table :data="list" style="width: 100%">
        <el-table-column
                prop="name"
                label="学科名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="remark"
                label="描述"
                width="180">
        </el-table-column>
        <el-table-column
                label="状态">
          <template slot-scope="scope">
            {{ scope.row.state ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="openFormToUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="openToDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页条-->
      <el-pagination
        background
        :current-page="page"
        :page-size="5"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="pageChange">
      </el-pagination>


      <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="名称" prop="name" label-width="50px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="remark" label-width="50px">
            <el-input v-model="form.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="50px">
            <el-switch v-model="form.state" active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value="1"
                       :inactive-value="0"></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </template>
</div>
<script>
  let vue = new Vue({
    el:"#div",
    data: {
      list: [
      ], /* 表示当前页数据 */
      page: 1, /* 表示页号 */
      total: 0, /* 总记录数 */
      form: {}, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
      formVisible: false, /* 控制新增和修改表单可见性 */
      dialogTitle: '', /* 控制新增和修改表单标题 */
      rules: {
        /*name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]*/
      } /* 表单校验规则 */
    },
    mounted () {
      this.findAll(1);
    }, /* data 初始化操作 */
    methods: {
      findAll (page) {
          axios.get("courseServlet?method=findByPage&currentPage="+page)
                  .then((resp)=>{
                    if (resp.data.flag){
                      this.list = resp.data.resultData.list;
                      this.page = resp.data.resultData.pageNum;
                      this.total = resp.data.resultData.total;
                    }
                  })
                  .catch(()=>{
                    this.$message.error("请求错误!");
                  });
      },
      delete (id) {
        axios.get("courseServlet?method=delete&courseId="+id)
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success("删除成功!")
                    this.findAll(1);
                  }else {
                    s.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                });
      },
      add (formData) {
        axios.post("courseServlet",formData+"&method=add")
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success("添加成功!")
                    this.findAll(1);
                  }else {
                    s.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                });
      },
      update (formData) {
        axios.post("courseServlet",formData+"&method=update")
                .then((resp)=>{
                  if (resp.data.flag){
                    this.$message.success("修改成功!")
                    this.findAll(1);
                  }else {
                    s.$message.error(resp.data.message);
                  }
                })
                .catch(()=>{
                  this.$message.error("请求错误!");
                });
      },
      pageChange(page) {
        this.findAll(page)
      },
      openToDelete (row) {
        this.$confirm('确定删除 【'+row.name+'】 吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.delete(row.id);
        })
      },
        getStringParameter(formData) {
            let param = "";
            for(let property in formData) {
                if(formData[property] != null) {
                    param += property + "=" + formData[property] + "&"
                }
            }
            //param = param.substring(0,param.length-1);
            return param;
        },
      openFormToAdd () {
        this.dialogTitle = '新增';
        this.formVisible = true;
        this.form = {};
      },
      openFormToUpdate (row) {
        this.dialogTitle = '修改';
        this.formVisible = true;
        this.form = row;
      },
      confirmForm (formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let id = this.form.id;
            let formData = this.getStringParameter(this.form);
            if (id !=null) {
              this.update(formData);
            } else {
              this.add(formData);
            }
            this.formVisible = false
          }
        })
      },
      closeForm (formName) {
        this.$refs[formName].clearValidate();
      }
    }
  });
</script>

<style>
  .dept-box {
    width: 100%;
  }
  .dept-box .tool-box {
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
  }
  .dept-box .el-pagination {
    margin-top: 20px;
  }
</style>
</body>
</html>